import React, { Fragment, useState } from "react";
import { Button, ButtonProps, Drawer } from 'antd';
import { EditOutlined } from '@ant-design/icons';

import DictionaryDetail from "../../DictionaryDetail";

interface EditDictDataBtnProps extends ButtonProps{
    dictName: string;
    dictId: number;
    dictType: string;
}

const EditDictDataBtn: React.FC<EditDictDataBtnProps> = ({dictName,dictId, dictType,...buttonProps}) => {
    const [visible, setVisible] = useState(false);

    const showDrawer = () => setVisible(true);
    const onClose = () => setVisible(false);

    return <Fragment>
        <Button
            icon={<EditOutlined />}
            onClick={showDrawer}
            {...buttonProps}
        >字典数据</Button>

        <Drawer
            title={`${dictName}-字典数据`}
            placement="right"
            onClose={onClose}
            visible={visible}
            width="70%"
            bodyStyle={{padding: 5}}
        >
            {visible && <DictionaryDetail dictId={dictId} dictType={dictType}/>}
        </Drawer>
    </Fragment>
}

EditDictDataBtn.defaultProps = {
    size: "small"
}

export default EditDictDataBtn;